<template>
  <div class="PeopleAdmin">
    <a-card>
      <a-row :gutter="30">
        <a-col :span="8">
          <a-form-item label="手机号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
            <a-input
              placeholder="请输入手机号"
              v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号!' }]}
        ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset: 1 }">
            <a-input
              placeholder="请输入姓名/昵称"
              v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入名称!' }]}
        ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            label="角色"
            has-feedback
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16,offset: 1 }"
          >
            <a-select
              style="width:100%"
              v-decorator="[
          'role',
          {rules: [{ required: true, message: '请选择角色!' }]}
        ]"
              placeholder="全部"
            >
              <a-select-option value="all">全部</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="30">
        <a-col :span="8">
          <a-form-item
            v-bind="formItemLayout"
            label="状态"
            has-feedback
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16,offset: 1 }"
          >
            <a-select
              style="width:100%"
              v-decorator="[
          'status',
          {rules: [{ required: true, message: '请选择状态!' }]}
        ]"
              placeholder="全部"
            >
              <a-select-option value="all">全部</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="15" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button style="margin-left:2%">重置</a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top:2%">
      <a-button type="primary" icon="plus" @click="showModal">新建</a-button>
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        :rowSelection="rowSelection"
      >
        <span slot="customTitle">用户名</span>
        <span slot="status">
          <a-form-item v-bind="formItemLayout" :label-col="{ span: 5 }">
            <a-switch
              v-decorator="['switchTable', { valuePropName: 'checkedTable' }]"
              checkedChildren="开"
              unCheckedChildren="关"
              defaultChecked
            />
          </a-form-item>
        </span>
        <span slot="operate">
          <span class="edit" @click="showEdit">编辑</span>
          <a-modal
            title="编辑人员信息"
            :visible="visibleEdit"
            @ok="handleEditOk"
            @cancel="handleEditCancel"
            v-model="visibleEdit"
          >
            <template slot="footer">
              <a-button key="back" @click="handleEditCancel">取消</a-button>
              <a-button key="submit" type="primary" @click="handleEditOk">确定</a-button>
            </template>
            <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入姓名!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="用户名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'userName',
          {rules: [{ required: true, message: '请输入用户名!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                type="password"
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'password',
          {rules: [{ required: true, message: '请输入密码!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="手机号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-select
                style="width: 100%"
                v-decorator="[
          'role',
          {rules: [{ required: true, message: '请选择角色!' }]}
        ]"
                placeholder="超级管理员"
              >
                <a-select-option value="snacks">零食</a-select-option>
                <a-select-option value="drinks">饮料</a-select-option>
                <a-select-option value="tag">标签</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'note',
          {rules: [{ required: true, message: '请输入备注!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="启用状态" :label-col="{ span: 5 }">
              <a-switch
                v-decorator="['switchEdit', { valuePropName: 'checkedEdit' }]"
                checkedChildren="开"
                unCheckedChildren="关"
                defaultChecked
              />
            </a-form-item>
          </a-modal>
          <span class="del" @click="showDeleteConfirm">删除</span>
          <a-modal
            title="编辑人员信息"
            :visible="visibleEdit"
            @ok="handleEditOk"
            @cancel="handleEditCancel"
            v-model="visibleEdit"
          >
            <template slot="footer">
              <a-button key="back" @click="handleEditCancel">取消</a-button>
              <a-button key="submit" type="primary" @click="handleEditOk">确定</a-button>
            </template>
            <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入姓名!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="用户名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'userName',
          {rules: [{ required: true, message: '请输入用户名!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                type="password"
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'password',
          {rules: [{ required: true, message: '请输入密码!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="手机号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-select
                style="width: 100%"
                v-decorator="[
          'role',
          {rules: [{ required: true, message: '请选择角色!' }]}
        ]"
                placeholder="超级管理员"
              >
                <a-select-option value="snacks">零食</a-select-option>
                <a-select-option value="drinks">饮料</a-select-option>
                <a-select-option value="tag">标签</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-input
                style="width: 100%"
                placeholder="请输入"
                v-decorator="[
          'note',
          {rules: [{ required: true, message: '请输入备注!' }]} 
        ]"
              />
            </a-form-item>
            <a-form-item label="启用状态" :label-col="{ span: 5 }">
              <a-switch
                v-decorator="['switchEdit', { valuePropName: 'checkedEdit' }]"
                checkedChildren="开"
                unCheckedChildren="关"
                defaultChecked
              />
            </a-form-item>
          </a-modal>
        </span>
      </a-table>
    </a-card>
    <a-modal
      title="新增人员"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
      <a-form-item label="姓名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入"
          v-decorator="[
          'name',
          {rules: [{ required: true, message: '请输入姓名!' }]} 
        ]"
        />
      </a-form-item>
      <a-form-item label="用户名" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入"
          v-decorator="[
          'userName',
          {rules: [{ required: true, message: '请输入用户名!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          type="password"
          placeholder="请输入"
          v-decorator="[
          'password',
          {rules: [{ required: true, message: '请输入用密码!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="手机号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入"
          v-decorator="[
          'phone',
          {rules: [{ required: true, message: '请输入手机号!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="角色" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-select
          style="width: 100%"
          v-decorator="[
          'role',
          {rules: [{ required: true, message: '请选择角色!' }]}
        ]"
          placeholder="请选择"
        >
          <a-select-option value="a">角色A</a-select-option>
          <a-select-option value="b">角色B</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-input
          placeholder="请输入"
          v-decorator="[
          'note',
          {rules: [{ required: true, message: '请输入备注!' }]}
        ]"
        />
      </a-form-item>
      <a-form-item label="启用状态" :label-col="{ span: 5 }">
        <a-switch
          v-decorator="['switch', { valuePropName: 'checked' }]"
          checkedChildren="开"
          unCheckedChildren="关"
          defaultChecked
        />
      </a-form-item>
    </a-modal>
  </div>
</template>

<script>
import leftmenu from "../../components/Leftmenu";
const columns = [
  {
    dataIndex: "userName",
    key: "userName",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "userName" }
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone"
  },
  {
    title: "用户角色",
    key: "userRole",
    dataIndex: "userRole"
  },
  {
    title: "状态",
    key: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "最近登陆时间",
    key: "latelyTime",
    dataIndex: "latelyTime"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operate" },
    key: "operate"
  }
];
const data = [
  {
    key: "1",
    userName: "1234",
    name: "口水娃玉米味烤肠袋装50g",
    phone: "",
    userRole: "1",
    latelyTime: ""
  }
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};
export default {
  name: "PeopleAdmin",
  data() {
    return {
      data,
      columns,
      rowSelection,
      visible: false,
      visibleEdit: false
    };
  },
  components: {
    leftmenu
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    showEdit() {
      this.visibleEdit = true;
    },
    handleEditOk(e) {
      setTimeout(() => {
        this.visibleEdit = false;
      }, 2000);
    },
    handleEditCancel(e) {
      this.visibleEdit = false;
    },
    showDeleteConfirm() {
      this.$confirm({
        title: "确认要删除此人员吗？",
        content: "删除此人员后，此人员无法登录",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        onOk() {
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        }
      });
    },
    // 新增人员接口
    listAdd() {
      this.axios
        .post("/api/algorithmIdentificationCode/save", {
          name: this.arithmeticName,
          code: this.arithmeticId
        })
        .then(response => {
          console.log(response);
          this.$message.info("新建算法成功");
          this.findPage();
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PeopleAdmin {
  width: 100%;
}
.edit {
  color: rgb(0, 85, 255);
}
.del {
  color: red;
}
</style>
